<template>
  <div>
    <hc></hc>
    <div class="w-80 m-auto mt-20 flex align-center justify-between">
      <div class="f18 c-blue">各类生鲜产品，等你来选</div>
      <div class="flex align-center ">
        <Input class="mr-20" v-model="keyword" placeholder="请输入搜索内容" />
        <Button class="mr-10" @click="searchProductList = [], keyword = ''">清空</Button>
        <Button type="primary" icon="ios-search-outline" @click="commodityList(true)">搜索</Button>
      </div>
    </div>

    <div class="m-auto w-80 mt-50 bg-ccc px-40 box-sizing pt-20" v-show="searchProductList.length">
      <Row :gutter="20">
        <Col
          v-for="item in searchProductList" :key="item.id">
          <div
            class="border-radius-05 bg-white flex flex-column align-center mb-20 relative hoverParent"
            style="height:400px; width: 300px;"
            @click="gotoDetail(item)"
            >
            <p class="fc-white bg-red w-50 flex align-center justify-center mb-40 h-30p">新品</p>
            <img style="width:200px; height:200px" :src="baseURL + item.image" alt="">
            <p class="tc f16 mt-20 px-20">{{ item.name }}</p>
            <p
              class="tc f14 fc-red absolute"
              style="bottom: 20px; "
              >
              {{ item.price / 100 }}元
              </p>
            <div class="hoverDetail">{{ item.detail }}</div>
          </div>
        </Col>
      </Row>
    </div>

    <div class="w-80 m-auto mt-50 flex align-center justify-between" v-show="!searchProductList.length">
      <Row
        class="overflow-a"
        style="height:420px;">
        <Col
          v-for="(item, index) in categoryLists"
          :key="item.id"
          class="w-100"
          span="24"
        >
          <Menu accordion @on-select="menuSelect">
            <Submenu :name="index+1">
              <template slot="title">
                {{ item.name }}
              </template>
              <MenuItem
                v-for="(ele, eleIndex) in item.childCategory"
                :name="eleIndex+1"
                :key="ele.id"
              >
                {{ ele.name }}
              </MenuItem>
            </Submenu>
          </Menu>
        </Col>
      </Row>
     <!-- 轮播图 -->
      <div class="flex-1 h-100">
        <Carousel
          loop
          autoplay
          class="flex-1 border-radius-05 hidden h-100"
          style="width:1000px;"
        >
          <CarouselItem
            style="width:1000px; height:420px"
            class="flex align-center justify-center"
            v-for="item in imgList" :key="item.id">
              <img style="width:100%;height:100%" :src="item.url">
          </CarouselItem>
        </Carousel>
      </div>
    </div>
    <div class="w-80 m-auto mt-20 bg-ccc pt-20 px-40 box-sizing" v-show="!searchProductList.length">
      <h3 class="tc mb-30 f18">为你推荐</h3>
      <div class="m-auto">
        <Row :gutter="20" justify="center">
          <Col
            v-for="item in productList" :key="item.id">
            <div
              class="border-radius-05 bg-white flex flex-column align-center mb-20 relative hoverParent"
              style="height:400px; width: 300px;"
              @click="gotoDetail(item)"
              >
              <p class="fc-white bg-red w-50 flex align-center justify-center mb-40 h-30p">新品</p>
              <img style="width:200px; height:200px" :src="baseURL + item.image" alt="">
              <p class="tc f16 mt-20 px-20">{{ item.name }}</p>
              <p
                class="tc f14 fc-red absolute"
                style="bottom: 20px; "
                >
                {{ item.price / 100 }}元
                </p>
              <div class="hoverDetail">{{ item.detail }}</div>
            </div>
          </Col>
        </Row>
      </div>
    </div>
    <!-- 尾部 -->
    <fc></fc>
  </div>
</template>

<script>
import hc from 'components/header-component'
import fc from 'components/floor-component'
import { outLogin, commodityList, categoryList } from 'api'
import oneImg from '../../images/slideshow/one.jpg'
import towImg from '../../images/slideshow/two.jpg'
import threeImg from '../../images/slideshow/three.jpg'
import fourImg from '../../images/slideshow/four.png'
import mixins from '@/mixins/index.js'
export default {
  mixins: [mixins],
  components: {
    hc,
    fc
  },
  data() {
    return {
      keyword: '', // 搜索字段
      categoryLists: [], // 一级列表
      activeId: 0, // 选中li的id
      isShowId: 0, // 二级列表显示id
      eleActiveId: 0, // li二级选中id
      imgList: [], // 图片列表
      productList: [], // 商品列表
      searchProductList: [], // 搜索的商品列表
    }
  },
  created() {
    this.commodityList() // 商品列表
    this.categoryList()
    this.imgList = [
      {
       url: oneImg,
       id: 1
      },
      {
        id: 2,
        url: towImg,
      },
      {
        id: 3,
        url: threeImg,
      },
      // {
      //   id: 4,
      //   url: fourImg,
      // }
    ]
  },
  methods: {
    // 商品列表查询
    commodityList(search) {
      commodityList(this.keyword).then(res => {
        this.productList = res.list
        if (search) {
          this.searchProductList = res.list
        }
      })
    },
    // 二级菜单查询
    categoryList() {
      categoryList().then(res => {
        this.categoryLists = res
      })
    },
    // 选择菜单
    menuSelect(item) {
      console.log(item)
    },
    // hover事件
    hoverStyle(data, num) {
      if (num === 1) {
        this.activeId = data
        this.isShowId = data
      } else {
        this.eleActiveId = data
      }
    },
    // 移出事件
    outHover(num) {
      // 一列表移出
      if (num === 1) {
        if (this.eleActiveId === 0) {
          setTimeout(() => {
            this.isShowId = 0
            this.activeId = 0
          },3000)
        }
        console.log(this.eleActiveId, '1')
        // 二列表移出
      }
      else if (num === 2) {
        console.log(this.eleActiveId, '2')
        setTimeout(() => {
          if (this.activeId === 0) {
            this.isShowId = 0
          }
        }, 3000);
        this.eleActiveId = 0
      }
    },
    // 前往详情
    gotoDetail(item) {
      this.$router.push({
        path: '/detail',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style scoped>
.mx-250{
  margin-left: 250px;
  margin-right: 250px;
}
.h-60p{
  height: 60px;
}
.c-blue{
  color: rgb(27,174,174);
}
.border-radius-05{
  border-radius: 5px;
}

.w-100p{
  width: 100px;
}
.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
}
.hoverParent:hover{
  box-shadow: 0 0  5px 3px #ccc;
}
.hoverParent:hover .hoverDetail{
  opacity: 1;
  height: 210px;
  padding: 20px;
}
.hoverDetail{
  bottom: 0;
  opacity: 0;
  height: 0px;
  z-index: 100;
  width: 300px;
  transition: 1s;
  color: white;
  position: absolute;
  box-sizing: border-box;
  background: rgba(27,174,174, 0.9);
}

</style>